<template>
  <div class="bcg">
    <header-comm></header-comm>
    <div class="tjpp">
      <div class="glfltit" v-if="$store.state.wzfl">
        <h3></h3>
        <a-icon @click="quxiao" type="close" />
      </div>
      <div :class="$store.state.wzfl==true?'gj_wzfl':''">
        <div :class="$store.state.wzfl==true?'addwzfl':''">
          <a-button type="primary" class="editable-add-btn" @click="addfl">添加品牌</a-button>
          <a-tooltip>
            <template slot="title">注：提取库存表中产品品牌</template>
            <a-button type="danger" class="editable-add-btn" @click="getclass">提取品牌</a-button>
          </a-tooltip>
        </div>

        <div class="hydj" v-if="$store.state.tjwz">
          <tjpptk class="hydj_xgym"></tjpptk>
        </div>
        <a-table
          :dataSource="dataSource"
          @change="gettjppdatalist"
          :pagination="pagination"
          :columns="columns"
        >
          <template slot="proPic" slot-scope="text, record, index">
            <div>
              <img
                class="cpflimg"
                v-for="(item,i) in record.proPic"
                :key="i"
                :src="`https://image.bearing.cn/qy/member/imgcp/`+cpflsqdwid+'/'+item"
                alt
              />
            </div>
          </template>
          <template slot="paixu" slot-scope="text, record">
            <span class="paixu" @click="()=>nodeUp(record.key, record)">
              <a-icon type="arrow-up" />
            </span>
            <span class="paixu" @click="()=>nodeDown(record.key, record)">
              <a-icon type="arrow-down" />
            </span>
          </template>
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <span>
                <a class="del" @click="() => edittj(record,record.key)">推荐</a>
                <a class="del" @click="() => edit(record,record.key)">修改</a>
                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除吗?"
                  @confirm="() => onDelete(record,record.key)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";
import tjpptk from "./tjpptk.vue";

const dataSource = [];
const columns = [
  {
    title: "品牌ID",
    dataIndex: "id_num",
    scopedSlots: { customRender: "id_num" }
  },
  {
    title: "品牌名称",
    dataIndex: "proName",
    scopedSlots: { customRender: "proName" }
  },
  {
    title: "图片",
    dataIndex: "proPic",
    scopedSlots: { customRender: "proPic" }
  },
  {
    title: "类型",
    dataIndex: "proType",
    scopedSlots: { customRender: "proType" }
  },
  {
    title: "推荐(注：1为推荐)",
    dataIndex: "isshow",
    scopedSlots: { customRender: "isshow" }
  },
   {
    title: "备注",
    dataIndex: "remark",
    scopedSlots: { customRender: "remark" }
  },
  {
    title: "排序",
    dataIndex: "paixu",
    scopedSlots: { customRender: "paixu" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));
    return {
      dataSource,
      columns,
      count: 2,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      cpflsqdwid: "",
      flmcvalue: "",
      fljsvalue: "",
      listid: "",
      proPic: "",
      protype: "",
      remark:''
    };
  },
  components: {
    headerComm,
    tjpptk
  },
  methods: {
    edittj(value, key) {
      this.axios
        .post(
          "kucun/ProClassRecommend.php",
          qs.stringify({
            id_num: value.id_num,
            bj: value.isshow
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
            this.gettjppdatalist(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },

    //提取品牌
    getclass() {
      this.axios
        .post(
          "kucun/getBrandClass.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            //2品牌1分类区分值
            proClass: 2
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
            this.gettjppdatalist(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    onDelete(value, key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
      this.axios
        .post(
          "kucun/ProClassListDelete.php",
          qs.stringify({
            id_num: value.id_num
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    quxiao() {
      this.$store.state.wzfl = false;
    },
    //添加品牌分类--列表
    gettjppdatalist(pagination) {
      this.axios
        .post(
          "kucun/ProClassList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$store.state.bbl_sqdwid,
            language: "0",
            proClass: 2
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.dataSource = res.data.result.data;
            this.pagination.total = Number(res.data.result.total);
            for (var i = 0; i < res.data.result.data.length; i++) {
              this.dataSource[i].key = i;
              if (this.dataSource[i].proPic) {
                this.dataSource[i].proPic = res.data.result.data[
                  i
                ].proPic.split(",");
              }
            }
          }
        });
    },
    // 节点上移
    nodeUp(key, data) {
      console.log("上");
      console.log(data);
      this.axios
        .post(
          "kucun/ProClassUpSort.php",
          qs.stringify({ id_num: data.id_num, language: 0, proClass: 2 })
        )
        .then(res => {
          console.log(res);
          this.gettjppdatalist(this.pagination);
        });
    },

    // 节点下移
    nodeDown(index, data) {
      console.log("下");
      console.log(data);
      console.log(index);
      this.axios
        .post(
          "kucun/ProClassDownSort.php",
          qs.stringify({ id_num: data.id_num, language: 0, proClass: 2 })
        )
        .then(res => {
          console.log(res);
          this.gettjppdatalist(this.pagination);
        });
    },
    edit(value, key) {
      this.$store.state.tjwz = true;
      this.$store.state.xiugaiflag = "1";
      console.log(value);
      if (this.$store.state.xiugaiflag != "") {
        this.proPic = value.proPic;
        this.flmcvalue = value.proName;
        this.fljsvalue = value.proRemark;
        this.remark = value.remark;
        this.listid = value.id_num;
        this.protype = value.proType;
      }
    },
    addfl(value, key) {
      this.$store.state.tjwz = true;
      this.$store.state.xiugaiflag = "";
    }
  },

  created() {
    this.gettjppdatalist(this.pagination);
    this.cpflsqdwid = this.$store.state.bbl_sqdwid;
  }
};
</script>

<style lang='less' scoped>
.tjpp {
  width: 98%;
  height: auto;
  position: relative;
  top: 100px;
  left: 1%;
  // box-shadow: 0 0 5px #ccc;
  border: 1px solid #ccc;
  text-align: left;
  background-color: #fff;
  .paixu {
    margin: 0 5px;
    cursor: pointer;
  }
  .cpflimg {
    width: 40px;
    height: 40px;
    margin: 0 5px;
  }
  .hydj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    height: 930px;
    .hydj_xgym {
      position: absolute;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .gj_wzfl {
    padding: 0 20px;
  }
  .glfltit {
    width: 100%;
    height: 72px;
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    line-height: 20px !important;
    border-bottom: 1px solid #ccc;
    h3 {
      font-size: 18px;
    }
    .anticon-close {
      font-weight: normal;
      font-size: 22px;
    }
  }
  .addwzfl {
    display: flex;
    justify-content: space-between;
    .addwzfl_tit {
      font-size: 14px;
    }
  }
  .editable-add-btn {
    margin: 15px 20px;
  }
  .button {
    margin: 15px 0;
  }
  .editable-add-btn:hover {
    background-color: #1890ff;
    border: 0 !important;
    color: #fff !important;
  }
  .editable-cell {
    position: relative;
  }

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    line-height: 18px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
  .ant-input {
    width: 70% !important;
  }
  .list_num {
    position: absolute;
    bottom: 60px;
    left: 25px;
    font-size: 15px;
  }
}
</style>
